<template>
  <el-dialog class="public-dialog" :title="title" :width="width" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false" :append-to-body="true">
    <div>
      <p v-if="length" class="text-[16px] mb-[16px]">
        选中数据: <span class="ml-[6px] text-[16px] text-[#3487FF]">{{ length }}</span>
      </p>

      <XForm ref="formRef" :fieldList="fieldList" :options="formOptions" :rules="rules" :formData="formData" :originOption="originOption">
        <template v-for="(item, idx) in fieldList.filter((v) => v.slot)" :key="idx" #[item.slot]>
          <slot :name="item.slot" :form="form" />
        </template>
        <template v-for="(item, idx) in fieldList.filter((v) => v.append)" :key="idx" #[item.append]>
          <slot :name="item.append" :form="form" />
        </template>
      </XForm>
      <div v-if="tips" class="flex text-[12px] text-[#9DA1AD] leading-[17px]">
        <svg-icon icon-class="warning" class="mr-[4px] mt-[3px]"></svg-icon>
        <span v-html="tips" />
      </div>
    </div>
    <template #footer>
      <el-button :disabled="loading" @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave"> 保存 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
const props = defineProps({
  width: { type: String, default: "560" },
  length: { type: Number, default: 0 },
  title: { type: String, default: "" },
  modelValue: { type: Boolean, default: false },
  rules: { type: Object, default: () => ({}) },
  tips: { type: String, default: "" },
  loading: { type: Boolean, default: false },
  inputLabel: { type: String, default: "" },
  fieldOptions: {
    type: Array,
    default: () => [
      {
        field: "input",
        type: "textarea",
        label: "",
        style: { width: "100%" },
        autosize: { minRows: 2, maxRows: 6 },
        full: true,
      },
    ],
  },

  originOption: { type: Object, default: () => ({}) },
  formOptions: { type: Object, default: () => ({ labelPosition: "top" }) },
  form: { type: Object, default: () => ({}) },
})

const emit = defineEmits(["update:modelValue", "submit"])

const formRef = ref()
const formData = ref({})
const fieldList = ref([])
watch(
  () => [props.fieldOptions, props.inputLabel, props.form],
  (val) => {
    const [options, label, form = {}] = val
    fieldList.value = options
    if (label && fieldList.value.length) {
      fieldList.value[0].label = label
    }
    // 回显
    if (Object.keys(form).length) {
      formData.value = form
    } else {
      formData.value = {}
    }
    // 去除表单验证
    setTimeout(() => {
      formRef?.value?.formRef?.clearValidate()
    }, 100)
  },
  { immediate: true }
)

const handleSave = async () => {
  try {
    await formRef.value.submit()
    emit("submit", { input: { ...formData.value } })
    setTimeout(() => {
      // formRef.value.resetForm()
      // formData.value = {}
    }, 1000)
  } catch (e) {
    console.error(e)
  }
}

const handleClose = (refresh) => {
  emit("update:modelValue", false)
  // formRef.value.resetForm()
  if (refresh) emit("refresh")
}

// const formOptions = {
//   labelPosition: "top",
// }
</script>
<style lang="scss" scoped></style>
